在vue项目中使用axios代理发送请求

您所在的位置：网站首页 › axios 代理 › 在vue项目中使用axios代理发送请求

在vue项目中使用axios代理发送请求

#在vue项目中使用axios代理发送请求| 来源: 网络整理| 查看: 265

我们知道跨域是浏览器为了安全而做出的限制策略浏览器请求必须遵循同源策略：同域名，同端口，同协议

那么我们会经常用到的解决跨域的方法有这几种： CORS跨域、jsonp跨域和代理跨域

CORS跨域 - 服务端设置，前端直接调用说明：后台允许前端某个站点进行访问

JSONP跨域前端适配后台配合说明：前后台同时改造，要注意的–他不是真正的请求，他是一段js脚本

接下来就是接口代理，其实就是通过修改nginx服务器配置来实现—目前用的比较多（前端修改，后台不动）是最安全也是最省事的

接下来——上代码！首先给大家看一下我的项目架构在这里插入图片描述首先需要在目录下建立一个vue.config.js（注意这里是根目录不是src）内容：

module.exports = { devServer: { host: 'localhost', port: 8080, proxy: { // 接口代理 '/api': { target: 'http://mall-pre.springboot.cn', changeOrigin:true, pathRewrite: { '/api':'' } } } } }

我们把一些配置写在里面，当我们这个配置文件修改的时候，我们需要先关闭服务器再run一次才可以修改完成

我们pathRewrite把api写为空，那么在访问接口的时候虽然会有api但是其实他是空的

好了配置完成我们的js之后我们再看下我们的mainjs有没有问题

import Vue from 'vue' import router from './router.js' import axios from 'axios' import VueAxios from 'vue-axios' import App from './App.vue' //import env from './env' axios.defaults.baseURL = '/api'; axios.defaults.timeout = 8000; //axios.defaults.baseURL = env.baseURL; // 接口错误拦截 axios.interceptors.response.use(function(response) { let res = response.data; if(res.status == 0) { return res.data; } else if(res.status == 10) { window.location.href = '/#/login'; } else { alert(res.msg); } }); Vue.use(VueAxios, axios); Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')

可以看到我们mainjs把这个baseURL定义了api,

接下来就是发送请求了

getProductList() { this.axios.get('/products', { params: { categoryId: '100012' } }).then((res)=> { if(res.list.length > 6) { this.phoneList = res.list.slice(0, 6); } }) } }

这里还有一个需要注意的就是get请求的请求参数是params，好了这样我们就能通过代理发送请求获取到数据了

【本文地址】

在vue项目中使用axios代理发送请求

在vue项目中使用axios代理发送请求

今日新闻

推荐新闻